<template>
    <div class="app-container calendar-list-container">
        <div class="filter-container justify-between">
            <div>
                <el-switch v-model="multi" inactive-text="批量操作"></el-switch>
                <template v-if="multi">
                    <el-button size="mini" type="info" @click="noticeMianshi()">通知面试</el-button>
                    <el-button size="mini" type="primary" @click="doExportExcel()">导出花名册</el-button>

                    <el-button size="mini" type="danger" @click="doRemove('','确定要删除吗？')">删除</el-button>
                </template>
            </div>
            <div class="">
                <el-select @change='doSearch' style="width:120px" class="filter-item" v-model="listQuery.gender"
                           placeholder="全部性别">
                    <el-option  label="全部性别" value=""></el-option>
                    <el-option v-for="(item,index) in gender_list" :key="item.data_text" :label="item.data_text"
                               :value="item.data_text"></el-option>
                </el-select>
                <el-input @keyup.enter.native="doSearch" style="width: 200px;" class="filter-item" placeholder="输入名称搜索"
                          v-model="listQuery.keyword">
                </el-input>
                <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="doSearch">搜索
                </el-button>
                <el-button class="filter-item" type="info" @click="downloadTemplate()">下载模板</el-button>
                <a href="http://rz.gongyide.com/talent_database_template.xls" download style="visibility: hidden" id="download-template"></a>
                <el-button class="filter-item" type="primary" @click="showErweima()">Hr上传码</el-button>
                <el-upload ref="uploadInput" class="" action="" :limit="1" :show-file-list="false" :http-request="importRencai" style="display:inline-block;padding:0;">
                    <el-button class="filter-item" type="warning">导入人才库</el-button>
                </el-upload>
            </div>
        </div>
        <el-table ref="multipleTable" :data="list" v-loading="listLoading" element-loading-text="给我一点时间"
                  border fit highlight-current-row style="width: 100%" @selection-change="onSelectionChange"
                  height="600">
            <el-table-column v-if='multi' type="selection" width="55"></el-table-column>
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column align="left" label="岗位" width="200px">
                <template slot-scope="scope">
                    <span>{{(scope.row.job_name=="通用岗位")?"---":scope.row.job_name}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="应聘人" width="80">
                <template slot-scope="scope">
                    <span class="relative_span">{{scope.row.applicant}} </span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="手机号" width="120">
                <template slot-scope="scope">
                    <span>{{scope.row.mobile }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="性别" width="60">
                <template slot-scope="scope">
                    <span>{{scope.row.gender}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label=" 年龄"  width="60">
                <template slot-scope="scope">
                    <span>{{scope.row.age}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="生日"  width="140">
                <template slot-scope="scope">
                    <span>{{scope.row.birthday}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="身份证号" width="160">
                <template slot-scope="scope">
                    <span>{{scope.row.id_number}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label=" 学历"  width="60">
                <template slot-scope="scope">
                    <span>{{scope.row.education}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label=" 民族"  width="60">
                <template slot-scope="scope">
                    <span>{{scope.row.nation}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label=" 籍贯"  width="60">
                <template slot-scope="scope">
                    <span>{{scope.row.native_place}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label=" 居住地" width="160">
                <template slot-scope="scope">
                    <span>{{scope.row.address}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label=" 导入时间" >
                <template slot-scope="scope">
                    <span>{{scope.row.create_time | showFixedTime}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label=" 导入人"  width="80">
                <template slot-scope="scope">
                    <span>{{scope.row.importer}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label=" 备注"  width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.remark}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="操作" class-name="small-padding fixed-width" fixed="right" width="300">
                <template slot-scope="scope">
                    <el-button round size="mini" type="primary" @click="openEditor(scope.row.id)">编辑</el-button>
                    <el-button round size="mini" type="info" @click="noticeMianshi(scope.row.id)">通知面试</el-button>
                    <el-button round size="mini" type="danger"
                               @click="doRemove(scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    
        <div class="pagination-container">
            <el-pagination background @size-change="onSizeChange" @current-change="onCurrentChange"
                           :current-page="listQuery.pageNumber" :page-sizes="[12,50,100,10000]"
                           :page-size="listQuery.pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog title="上传二维码" :visible.sync="showMa" >
            <img :src="erweima_url" alt="" style="margin:0 auto;width:500px;height:500px;display:block;">
            <a :href="erweima_url"  download style="display:block;margin:20px auto;text-align:center;"><el-button type="primary" >下载</el-button></a>
        </el-dialog>
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
            <el-form :rules="formRules" ref="dataForm" :model="bean" label-position="right" label-width="120px" style='width: 400px; margin-left:50px;'>
                <template>
                    <el-form-item  label="应聘人" prop="applicant">
                        <el-input v-model="bean.applicant" placeholder="输入应聘人名称" ></el-input>
                    </el-form-item>
                    <el-form-item  label="手机号" prop="mobile">
                        <el-input v-model="bean.mobile" placeholder="输入应聘人手机" ></el-input>
                    </el-form-item>
                    <el-form-item  label="性别" prop="gender">
                        <el-input v-model="bean.gender" placeholder="输入应聘人性别" ></el-input>
                    </el-form-item>
                    <el-form-item  label="年龄" prop="age">
                        <el-input v-model="bean.age" placeholder="输入应聘人年龄" ></el-input>
                    </el-form-item>
                    <el-form-item  label="生日" prop="birthday">
                        <el-input v-model="bean.birthday" placeholder="输入应聘人生日" ></el-input>
                    </el-form-item>
                </template>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="saveBean" :loading="dealing">确定</el-button>
            </div>
        </el-dialog>
        <mianshiWin @refreshList="loadList"  @noticeWinClose="noticeWinClose" v-if="showMianshi" :ids="ids" :mobiles="mobiles"></mianshiWin>
    </div>
</template>
<script>
	import Vue from 'vue'
	import waves from '@/directive/waves' // 水波纹指令
	import API from '@/api'
	import Http from '@/http'
	import Store from '@/store'
	import Msg from '@/utils/msg'
	import Utils from '@/utils/common'
	import _ from 'underscore'
	import Qiniu from '@/utils/qiniu'
	import {mapGetters} from 'vuex'
	import mianshiWin from '@/components/mianshiWin'
	import resumeTemplate from '@/components/resumeTemplate'
	import interviewWin from '@/components/interviewWin'

	let Base64 = require('js-base64').Base64;
	export default {
		directives: {waves},
		data() {
			return {
				dialogTitle:'',
				dialogFormVisible:false,
				dealing: false,
				multi: true,
				company:Store.getters.user.company,
				list: [],
				total: 0,
				listLoading: true,
				listQuery: {
					pageNumber: 1,
					pageSize: 12,
					keyword: '',
					status: '',
				},
				gender_list:Store.getters.basedata.gender,
				bean: {},
				formRules: {
					applicant: [{ required: true, message: '请填写应聘人名称', trigger: 'blur' }],
					mobile: [{ required: true, message: '请填写应聘人手机号', trigger: 'blur' }],
				},
				multipleSelection: [],
				mobiles:'',
				ids:'',
				showMianshi:false,
                showMa:false,
				erweima_url:''
			}
		},
		filters: {},
		components: {
			mianshiWin,resumeTemplate,interviewWin
		},
		created() {
			this.loadList()
            this.loadErweima()
		},
		computed: {
		},
		methods: {
			loadList() {
				this.listLoading = true
				Http.getModel(API.get_hostworker_list, this.listQuery, false).then((json) => {
					this.loading = false
					if (json.code == 0) {
						var list = json.data.list
						for(let i=0;i<list.length;i++){
							if(list[i].interviews){
								list[i].interview_bean = []
								var str2 = list[i].interviews;
								var str1 = list[i].interview_detail;
								if(str2&&str2!='null'){
									var arr = str2.split(',')
									var arr_detail = JSON.parse(str1)||[];
									var return_arr=[];
									for(let i=0;i<arr.length;i++){
										if(arr_detail[i]){
											return_arr.push(arr_detail[i])
										}else{
											var item = {
												interview_id :arr[i],
												result:0,
												step:i+1
											}
											return_arr.push(item)
										}
									}
									list[i].interview_bean = return_arr
								}
							}
						}
						this.list = list
						this.total = parseInt(json.data.total)
						this.listLoading = false
					}
				})
			},
			loadErweima(){
				Http.getModel(API.sfz_ercode, {}, false).then((json) => {
					this.loading = false
					if (json.code == 0) {
						this.erweima_url = json.data
					}
				})
            },
			importRencai(obj){
                var fileObj = obj.file
				if(fileObj){
					var file_info_arr = fileObj.name.split('.')
					var file_type = file_info_arr[file_info_arr.length-1]
                    console.log("file_type:",file_type)
					if(file_type!='xls'&&file_type!='xlsx'){
						Msg.error('请上传表格文件！')
						this.$refs['uploadInput'].clearFiles()
						return false
					}
					console.log('file_type:',file_type)
					var form = new FormData();
					var token = Store.getters.token;
					form.append("token", token);// token
					form.append("import_data", fileObj);// 文件对象
					var xhr = new XMLHttpRequest();
					var url = window.server_root+API.upload_excel;
					xhr.open("post", url, true);
					xhr.onload = ()=>{
						console.log("onload")
						console.log(xhr.responseText);
						var json = JSON.parse(xhr.responseText);
						json.name = fileObj.name
						Msg.success('上传成功',()=>{
							this.loadList()
                        })

					};
					xhr.onerror =  function(){
						Msg.error("上传失败")
					};
					xhr.upload.onprogress = function(evt){

					};
					xhr.upload.onloadstart = function(){//上传开始执行方法
					};
					xhr.send(form);
					this.$refs['uploadInput'].clearFiles()
				}else{
					Msg.error("未选择文件");
				}
            },
			downloadTemplate(){
				document.getElementById('download-template').click()
            },
			showErweima(){
				this.showMa = true
            },
			openEditor(id) {
				this.dialogFormVisible = true
				if (id) {
					this.loadBean(id)
					this.dialogTitle = '编辑信息'
				}else{
					this.dialogTitle = '新增供应商'
					this.bean = {
						icon:"",
						url:'',
						name:'',
					}
				}
				this.$nextTick(() => {
					this.$refs['dataForm'].clearValidate()
				})
			},
			loadBean(id) {
				Http.getModel(API.worker_singleInfo, {id: id}).then((json) => {
					if (json.code == 0) {
						let bean = json.data
						this.bean = bean
					}
				})
			},
			saveBean() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						this.dealing = true
						Http.getModel(API.worker_editInfo, this.bean, false).then((json) => {
							this.dealing = false
							if (json.code == 0) {
								this.dialogFormVisible = false
								Msg.success(json.msg, () => {
									this.loadList()
								})
							} else {
								Msg.error(json.msg)
							}
						})
					}
				})
			}
			,
			doRemove(ids) {
				if (!ids) {
					if (this.multipleSelection.length == 0) {
						Msg.error("请先选择");
						return false;
					} else {
						ids = _.pluck(this.multipleSelection, "id").join(",");
					}
				}
				Msg.prompt('请输入安全密码', (pwd) => {
					Http.getModel(API.delete_info, {ids: ids,pwd:Base64.encode(pwd)}, false).then((json) => {
						if (json.code == 0) {
							Msg.success(json.msg, () => {
								this.loadList()
							})
						} else {
							Msg.error(json.msg)
						}
					})
				})
			}
			,
			doPullBlack(mobiles){
				Msg.prompt('请输入拉黑原因', (reason) => {
					Http.getModel(API.add_to_black_list, {mobile: mobiles,reason:reason}, false).then((json) => {
						if (json.code == 0) {
							Msg.success(json.msg, () => {
								this.loadList()
							})
						} else {
							Msg.error(json.msg)
						}
					})
				})
			},
			/***   公用部分 start ***/
			onSelectionChange(val) {
				this.multipleSelection = val;
			}
			,
			doSearch() {
				this.listQuery.pageNumber = 1
				this.loadList()
			}
			,
			onSizeChange(val) {
				this.listQuery.pageSize = val
				this.loadList()
			}
			,
			onCurrentChange(val) {
				this.listQuery.pageNumber = val
				this.loadList()
			},
			/***   公用部分 end ***/


			// 通知面试
			noticeMianshi(ids){
				var mobiles = '';
				if (this.multipleSelection.length == 0) {
					Msg.error("请先选择");
					return false;
				} else {
					ids = _.pluck(this.multipleSelection, "id").join(",");
					mobiles = _.pluck(this.multipleSelection, "mobile").join(",");
				}
				this.ids = ids;
				this.mobiles = mobiles
				this.showMianshi = true
			},
			noticeWinClose(){
				this.showMianshi = false
			},
			//  导出花名册
			doExportExcel: function (ids) {
				if (!ids) {
					if (this.multipleSelection.length == 0) {
						Msg.error("请先选择");
						return false;
					} else {
						ids = _.pluck(this.multipleSelection, "id").join(",");
					}
				}
				var DownLoadFile = function (options) {
					var config = $.extend(true, { method: 'post' }, options);
					var $iframe = $('<iframe id="down-file-iframe" />');
					var $form = $('<form target="down-file-iframe" method="' + config.method + '" />');
					$form.attr('action', config.url);
					for (var key in config.data) {
						$form.append('<input type="hidden" name="' + key + '" value="' + config.data[key] + '" />');
					}
					$iframe.append($form);
					$(document.body).append($iframe);
					$form[0].submit();
					$iframe.remove();
				}
				var params = {
					url:window.server_root+API.downLocalTalentList,
					data:{
						ids:ids,
					}
				}
				DownLoadFile(params)
			},
			//  下载简历
			downloadResume(id){
				var company = this.company;
				var template_id = '';
				if(company.template){
					template_id = company.template
				}else{
					template_id = 'B88888888'
				}
				var DownLoadFile = function (options) {
					var config = $.extend(true, { method: 'post' }, options);
					var $iframe = $('<iframe id="down-file-iframe" />');
					var $form = $('<form target="down-file-iframe" method="' + config.method + '" />');
					$form.attr('action', config.url);
					for (var key in config.data) {
						$form.append('<input type="hidden" name="' + key + '" value="' + config.data[key] + '" />');
					}
					$iframe.append($form);
					$(document.body).append($iframe);
					$form[0].submit();
					$iframe.remove();
				}
				var params = {
					url:window.server_root+API.batch_export_resumes,
					data:{
						ids:id,
						template:template_id
					}
				}
				DownLoadFile(params)
			},



		}
	}
</script>
<style>

</style>
